<template>
  <div>
    <div v-if="!teachersend.hasOwnProperty('tokenstring')">
      <div class="bgimg">
        <el-image
          :src="baseurl + '/images/other/11333874_p0_master1200.jpg'"
          fit="cover"
          style="height: 600px; width: 100%"
        ></el-image>

        <div class="logincontent">
          <div class="logincontent_title">家庭指导师登录</div>
          <div class="logincontent_input">
            <div class="inputline">
              <div style="width: 15%">用户名</div>
              <el-input
                placeholder="请输入内容"
                v-model="login_tel"
                clearable
                class="elinputp"
              >
              </el-input>
            </div>
            <div class="inputline">
              <div style="width: 15%">密码</div>
              <el-input
                class="elinputp"
                placeholder="请输入密码"
                v-model="login_password"
                show-password
              ></el-input>
            </div>
            <div class="inputline" style="display: flex;justify-content: space-around;">
              
              <el-button
                style="background-color: #9c446e; color: #fff"
                @click="nextclick"
                >下一步</el-button
              >
              <el-button
                :loading="loading"
                type="danger"
                style="background-color:#9c446e ;color: #FFF;"
                @click="token_login_temp"
                >临时身份token</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="teachersend.hasOwnProperty('tokenstring') && !showspuindex">
      <div
        style="
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 34px;
          color: #9c446e;
          padding: 30px 20px;
        "
      >
        我的学员家长
      </div>
      <el-row
        :gutter="12"
        v-for="(item, index) in userlist"
        :key="index"
        style="display: flex; flex-wrap: wrap"
      >
        <el-col :span="6">
          <el-card
            shadow="always"
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              width: 300px;
            "
          >
            <img
              class="image"
              :src="
                item.provider == 'tel' ? baseurl + item.imgUrl : item.imgUrl
              "
              alt=""
              @click="forstumsg(item)"
            />
            <div style="padding: 14px">
              <span>{{ item.nickName }}</span>
              <div class="bottom clearfix">
                <span class="time">{{ item.userName }}</span>
                <el-button
                  style="color: #9c446e; font-weight: 800"
                  type="text"
                  class="button"
                  @click="showspuindexbut(item)"
                  >查看量化评估</el-button
                >
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="16" :offset="0">
          <div style="height: 326px; overflow: auto" v-if="item.children.length > 0">
            <el-timeline>
              <el-timeline-item
                :timestamp="'里程碑'"
                placement="top"
                v-for="(it, ind) in item.children"
                :key="ind"
              >
                <el-card>
                  <h4>{{ it.title }}</h4>
                  <p>{{ it.content }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
          <div style="height: 326px;width: auto;display: flex;justify-content: center;align-items: center;"  v-else>
           <div>
            <el-image :src="baseurl + '/images/other/erNALL.png'" fit="fill" :lazy="true"></el-image>
            <div style="color: #9c446e;text-align: center;">什么也没有</div>
           </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="70%"
    >
    
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header" style="display: flex;justify-content: space-between;align-items: center;">
        <el-select v-model="item_name" placeholder="请选择亲子课">
      <el-option
        v-for="(item) in options"
        :key="item.contentid"
        :label="item.title"
        :value="item.contentid"
        >
      </el-option>
    </el-select>
        <span>量化评估</span>
      </div>
      <el-row :gutter="20">
      <el-col :span="12" :offset="0">
      <span>孩子参与度</span>
      <el-rate
      v-model="rate_data.participation"
      disabled
      show-score
      text-color="#ff9900"
      score-template="{value}">
    </el-rate>
      </el-col>
      <el-col :span="12" :offset="0">
        <span>亲子课满意程度</span>
      <el-rate
      v-model="rate_data.satisfaction"
      disabled
      show-score
      text-color="#ff9900"
      score-template="{value}">
    </el-rate>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
      <span>孩子学习能力</span>
      <el-rate
      v-model="rate_data.study"
      disabled
      show-score
      text-color="#ff9900"
      score-template="{value}">
    </el-rate>
      </el-col>
      <el-col :span="12" :offset="0">
        <span>沟通能力</span>
      <el-rate
      v-model="rate_data.communication"
      disabled
      show-score
      text-color="#ff9900"
      score-template="{value}">
    </el-rate>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
      <span>孩子情绪管理</span>
      <el-rate
      v-model="rate_data.management"
      disabled
      show-score
      text-color="#ff9900"
      score-template="{value}">
    </el-rate>
      </el-col>
      <el-col :span="12" :offset="0">
        <span>创新能力</span>
      <el-rate
      v-model="rate_data.createi"
      disabled
      show-score
      text-color="#ff9900"
      score-template="{value}">
    </el-rate>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
      <span>孩子自我管理</span>
      <el-rate
      v-model="rate_data.self_management"
      disabled
      show-score
      text-color="#ff9900"
      score-template="{value}">
    </el-rate>
      </el-col>
    </el-row>
    </el-card>
    
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>父母认证感悟提升</span>
      </div>
      <span>
        {{rate_data.whatsay || '暂无'}}
      </span>
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>亲子瞬间</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <div slot="header">
            <span>亲子课照片</span>
          </div>
          <el-carousel height="150px">
            <el-carousel-item v-for="item in rate_data.imglist" :key="item">
             <el-image :src="baseurl + item" fit="fill" :lazy="true"></el-image>
             
            </el-carousel-item>
          </el-carousel>
        </el-card>
        
        </el-col>
        <el-col :span="12" :offset="0">
          <el-card shadow="always" :body-style="{ padding: '20px' }">
          <div slot="header">
            <span>亲子视频瞬间</span>
          </div>
          <el-carousel height="150px">
            <el-carousel-item v-for="item in rate_data.videolist" :key="item">
             <video :src="baseurl + item" controls style="width: auto;height: auto;"></video>
             
            </el-carousel-item>
          </el-carousel>
        </el-card>
        </el-col>
      </el-row>
      
    </el-card>




      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      login_password: "",
      login_tel: "",
      islogin: false,
      teachersend: {},
      userlist: [],
      baseurl: "https://zyc618.mynatapp.cc",
      showspuindex: false,
      userid: "",
      dialogVisible: false,
      options:[],
      item_name:"",
      rate_data:{}
    };
  },
  created() {
    // 页面加载时检查是否有保存的数据，并显示在输入框中
    const savedData = sessionStorage.getItem("teacherData");
    if (savedData) {
      this.teachersend = JSON.parse(savedData);
      this.islogin = true;
      this.getallstu();
    }
  },
  methods: {
    saveData() {
      // 存储数据到sessionStorage
      sessionStorage.setItem("teacherData", JSON.stringify(this.teachersend));
    },
    //获取所有学员信息
    async getallstu() {
      let result = await this.$API.CommunityConvention.getallstu({
        teacherid: this.teachersend.teacherid,
      });
      if (result.code == 200) {
        this.userlist = result.data.results;
      }
    },
    async showspuindexbut(item) {
      //获取亲子课里程碑:
      this.dialogVisible = true;
      //发起请求:
      this.options = item.children;
      console.log(this.options);
    },
    //登录回调:
    async nextclick() {
      let result = await this.$API.CommunityConvention.loginteacher({
        password: this.login_password,
        login_tel: this.login_tel,
      });

      if (result.code == 200) {
        this.teachersend = result.data;
        this.saveData();
        this.getallstu();
        this.islogin = true;
      }
    },
    async changeoption(){
      let result = await this.$API.evaluate.getallline({
        id:this.item_name
      });
      console.log(result);
      if(result.code == 200){
        this.rate_data = result.data;
        this.rate_data.videolist = JSON.parse(this.rate_data.videolist );
        this.rate_data.imglist = JSON.parse(this.rate_data.imglist );
        
      }
    },
    //临时登录回调:
    async token_login_temp() {
      let result = await this.$API.CommunityConvention.loginteacher({
        password: '111111',
        login_tel:'13456773847',
      });

      if (result.code == 200) {
        this.teachersend = result.data;
        this.saveData();
        this.getallstu();
        this.islogin = true;
      }
    },
  },
  watch:{
    item_name:{
      handler(){
        this.changeoption()
      }
    }
  }
};
</script>
<style>
.bgimg {
  position: relative;
  width: 100%;
  object-fit: cover;
}
.logincontent {
  width: 450px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: rgba(255, 255, 255, 0.5);
  color: #9c446e;
  font-weight: 600;
}
.inputline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.elinputp {
  width: 60%;
}
.logincontent_title {
  text-align: center;
  padding: 30px;
}
.logincontent_input {
}
.image {
  width: 200px;
  display: block;
}
</style>
